<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div id="box"></div>
  <div id="box1"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <!-- 提供了操作DOM的react扩展库 -->
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <!-- 解析jsx语法的代码转换为js语法 -->
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script src="./js/prop-types.js"></script>
  <script type="text/babel">
    /* 
       组件的三大属性：state props refs

       state :react中很多地方都需要数据 在react中叫做状态 专门用来管理状态的对象 state
       作用：
       ①存储状态（数据）
       ② 通过更改组件的state来更新对应的页面的显示（重新渲染）
       操作state 初始化状态 读取状态 更新状态 this.setState()

       props
       不可更改的单项数据流
       组件对象都有props
       获取props属性值  this.props.xx
       数据从组件外向组件内传递
      可以对 props中的属性进行类型和必要性的限制

      state props 区别
      props 数据是从外面传递到组件内部
      state 中的数据（状态）是组件私有的
      props 中的数据是只读的，不能重新赋值不能改
      state 中的数据 可读可写可以更改
      
        */
      class Component1 extends React.Component {
        constructor(props) {
          super(props);
          //   props是不可更改的 react中说的单项数据流指的就是props
          console.log(props);
        }

        render() {
          return (
            <div>
              <h1>{this.props.name}</h1>
              <h1>{this.props.age}</h1>
            </div>
          );
        }
      }
      // 对标签的属性值的类型和必要性进行限制
      Component1.propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number
      };
      // 默认值 没有值使用默认值，有值则使用当前的值
      Component1.defaultProps = {
        name: "张水水"
      };

      const item = {
        name: "tom",
        sex: "女",
        age: 10
      };
      // ReactDOM.render(<Component1 name={item.name} sex={item.sex} age={item.age}/>,document.getElementById('box'));
      ReactDOM.render(<Component1 {...item} />, document.getElementById("box"));
    </script>
</body>

</html>